<template>
  <div class="wrapper">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      active-text-color="#20ADE5"
    >
      <el-menu-item index="1">
        <router-link to="/processSettings" :class="{ style: isActive1 }">流程设置</router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="/singleNumberSettings" :class="{ style: isActive2 }">单号设置</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <router-link to="/systemInitialization" :class="{ style: isActive3 }">系统初始化</router-link>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: ['chain'],
  data () {
    return {
      cuzhi: null,
      activeIndex: '',
      isActive1: false,
      isActive2: false,
      isActive3: false
    }
  },
  created () {
    this.setValue()
  },
  methods: {
    handleSelect (key, keyPath) { },
    setValue () {
      this.activeIndex = this.chain
      switch (this.activeIndex) {
        case '1': this.isActive1 = true; break
        case '2': this.isActive2 = true; break
        case '3': this.isActive3 = true; break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  border-bottom: 1px solid #e3e3e3;
  .el-menu {
    margin-left: 20px;
    .el-menu-item {
      font-size: 16px;
      &:hover {
        color: #20ade5;
      }
      .style {
        font-weight: bold;
      }
    }
  }
}
</style>
